



		<div style="margin-bottom:20px;">
			<a href="http://panopta.com" target="_blank">
				<img style="width:220px;" src="https://my.panopta.com/static/images/Panopta-Logo.png">
			</a>
		</div>

		<a class="btn" href="http://www.panopta.com/?p=3481">Back to docs</a>
		<button id="open-wizard" class="btn btn-primary">Open wizard</button>




		<div class="wizard" id="wizard-product">
			<h1>เพิ่มสินค้า</h1>
			<div class="wizard-card" data-cardname="name">
				<h3>ระบุชื่อสินค้า</h3>

				<div class="wizard-input-section">
					<p>ระบุชื่อสินค้า</p>
					<div class="control-group">
						<input name="cpn" type="text" />
					</div>
				</div>

				<div class="wizard-input-section">
					<p>เลือกหมวดหมู่</p>
					<div class="control-group">					
						<div class="controls">
							<select id="cpcat" name="cpcat"></select>
						</div>
					</div>	
				</div>			
			</div>
			<div class="wizard-card" data-cardname="group">
				<h3>กำหนดราคา</h3>

				<div class="wizard-input-section">
					<p>ราคาขาย</p>
					<div class="control-group">
						<input name="cpp" type="text" />
					</div>					
				</div>
				<div class="wizard-input-section">
					<p>ส่วนลด (คิดเป็นบาท)</p>
					<div class="control-group">
						<input name="cpdc" type="text" />
					</div>					
				</div>
			</div>
			<div class="wizard-card" data-cardname="services">
				<h3>รายละเอียดสินค้า</h3>
				<div class="wizard-input-section">
					<p>ระบุรายละเอียดสินค้า</p>
					<textarea name="cpdesc" rows="5" cols="25"></textarea>				
				</div>
			</div>
			<div class="wizard-card" data-onload="" data-cardname="location">
				<h3>รูปภาพสินค้า</h3>
				<div class="wizard-input-section">
					<p></p>					
					<div class="fileupload fileupload-new" data-provides="fileupload">
						<span class="btn btn-file"><span class="fileupload-new">Select file</span><span class="fileupload-exists">Change</span><input type="file" name="cpimg[]" multiple="multiple" /></span>
						<span class="fileupload-preview"></span>
						<a href="#" class="close fileupload-exists" data-dismiss="fileupload" style="float: none">×</a>
					</div>
				</div>
			</div>			
			<div class="wizard-error">
				<div class="alert alert-error">เกิดข้อผิดพลาด โปรดลองใหม่</div>
				<a class="btn btn-primary btn-wizard-finish">กลับ</a>
			</div>
			<div class="wizard-failure">
				<div class="alert alert-error">เพิ่มสินค้าล้มเหลว โปรดลองใหม่อีกครั้ง</div>
				<a class="btn btn-primary btn-wizard-finish">กลับ</a>
			</div>
			<div class="wizard-success">
				<div class="alert alert-success">เพิ่มสินค้าเรียบร้อย</div>						
				<a class="btn btn-primary btn-wizard-finish">เสร็จสิ้น</a>				
			</div>
		</div>

<script type="text/javascript">


$(function() {
	$.fn.wizard.logging = true;
	var wizard = $("#wizard-product").wizard({ submitUrl : '<?php print base_url() . 'test/ajax_wizard/'; ?>' });
	
	wizard.on("submit", function(wizard) {
		/*var submit = {
			"hostname": $("#new-server-fqdn").val()
		};

		setTimeout(function() {
			wizard.trigger("success");
			wizard.hideButtons();
			wizard._submitting = false;
			wizard.showSubmitCard("success");
			wizard._updateProgressBar(0);
		}, 2000);*/
		$.ajax({
	        type: "POST",
	        url: wizard.args.submitUrl,
	        data: wizard.serialize(),
	        dataType: "json",
	        success: function(resp) {
	        	console.debug(resp);
	            wizard.submitSuccess();
	            wizard.hideButtons();
	            wizard.updateProgressBar(0);
	        },
	        error: function() {
	            wizard.submitFailure();
	            wizard.hideButtons();
	        },
	    });
	});

	wizard.on("reset", function(wizard) {
		wizard.setSubtitle("");
	});

	wizard.el.find(".btn-wizard-finish").click(function() {
		wizard.reset().close();
		windows.location.reload();
	});

	wizard.el.find(".wizard-success .create-another-server").click(function() {
		wizard.reset();
	});
	$("#open-wizard").click(function() {
		wizard.show();
	});
});

</script>
